<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Home</title>
<script type="text/javascript" src="js/scrolltopcontrol.js"></script>
<script type="text/javascript" src="js/simplegallery.js"></script>


<script type="text/javascript">

var mygallery=new simpleGallery({
	wrapperid: "simplegallery1", //ID of main gallery container,
	dimensions: [1000, 233], //width/height of gallery in pixels. Should reflect dimensions of the images exactly
	imagearray: [
		["css/images/slide_top.png", "", "", ""],
		["css/images/slide_top2.jpg", "", "", ""],
		["css/images/slide_top3.jpg", "", "", ""],
		["css/images/slide_top4.jpg", "", "", ""],
		["css/images/slide_top5.jpg", "", "", ""],
	],
	autoplay: [true, 2500, 2], //[auto_play_boolean, delay_btw_slide_millisec, cycles_before_stopping_int]
	persist: false, //remember last viewed slide and recall within same session?
	fadeduration: 500, //transition duration (milliseconds)
	oninit:function(){ //event that fires when gallery has initialized/ ready to run
		//Keyword "this": references current gallery instance (ie: try this.navigate("play/pause"))
	},
	onslide:function(curslide, i){ //event that fires after each slide is shown
		//Keyword "this": references current gallery instance
		//curslide: returns DOM reference to current slide's DIV (ie: try alert(curslide.innerHTML)
		//i: integer reflecting current image within collection being shown (0=1st image, 1=2nd etc)
	}
})

</script>
<link rel="stylesheet" type="text/css" href="css/main_csc.css">

<link rel="stylesheet" type="text/css" href="css/nivo-slider.css">
<link rel="stylesheet" type="text/css" href="css/default.css">
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/ddaccordion.js"></script>
<script type="text/javascript" src="js/jquery.nivo.slider.js"></script>

<link href="css/imgbubbles.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/imgbubbles.js"></script>
<script type="text/javascript">

jQuery(document).ready(function($){
	$('ul#orbs').imgbubbles({factor:1.75}) //add bubbles effect to UL id="orbs"
	$('ul#squares').imgbubbles({factor:2.5}) //add bubbles effect to UL id="squares"
})

</script>
<script type="text/javascript">

function opennewsletter(){
	emailwindow=dhtmlmodal.open('EmailBox', 'iframe', 'a_002.html', '', 'width=400px,height=20px,center=1,resize=0,scrolling=1')

emailwindow.onclose=function(){ //Define custom code to run when window is closed
	var theform=this.contentDoc.forms[0] //Access first form inside iframe just for your reference
	var theemail=this.contentDoc.getElementById("emailfield") //Access form field with id="emailfield" inside iframe
	if (theemail.value.indexOf("@")==-1){ //crude check for invalid email
		alert("Please enter a valid email address")
		return false //cancel closing of modal window
	}
	else{ //else if this is a valid email
		document.getElementById("youremail").innerHTML=theemail.value //Assign the email to a span on the page
		return true //allow closing of window
	}
}
} //End "opennewsletter" function

</script>

<link rel="stylesheet" href="css/dhtmlwindow.css" type="text/css" />
<script type="text/javascript" src="js/dhtmlwindow.js"></script>
<link rel="stylesheet" href="css/modal.css" type="text/css" />
<script type="text/javascript" src="js/modal.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  var currentPosition = 0;
  var slideWidth = 560;
  var slides = $('.slide');
  var numberOfSlides = slides.length;

  // Remove scrollbar in JS
  $('#slidesContainer').css('overflow', 'hidden');

  // Wrap all .slides with #slideInner div
  slides
    .wrapAll('<div id="slideInner"></div>')
    // Float left to display horizontally, readjust .slides width
	.css({
      'float' : 'left',
      'width' : slideWidth
    });

  // Set #slideInner width equal to total width of all slides
  $('#slideInner').css('width', slideWidth * numberOfSlides);

  // Insert controls in the DOM
  $('#slideshow')
    .prepend('<span class="control" id="leftControl">Clicking moves left</span>')
    .append('<span class="control" id="rightControl">Clicking moves right</span>');

  // Hide left arrow control on first load
  manageControls(currentPosition);

  // Create event listeners for .controls clicks
  $('.control')
    .bind('click', function(){
    // Determine new position
	currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1;
    
	// Hide / show controls
    manageControls(currentPosition);
    // Move slideInner using margin-left
    $('#slideInner').animate({
      'marginLeft' : slideWidth*(-currentPosition)
    });
  });

  // manageControls: Hides and Shows controls depending on currentPosition
  function manageControls(position){
    // Hide left arrow if position is first slide
	if(position==0){ $('#leftControl').hide() } else{ $('#leftControl').show() }
	// Hide right arrow if position is last slide
    if(position==numberOfSlides-1){ $('#rightControl').hide() } else{ $('#rightControl').show() }
  }	
});
</script><script type="text/javascript" src="js/cal2.js"></script>
<script type="text/javascript" src="js/cal_conf2.js"></script>

<script type="text/javascript">

function opennewsletter(){
	emailwindow=dhtmlmodal.open('EmailBox', 'iframe', 'a_002.html', '', 'width=400px,height=20px,center=1,resize=0,scrolling=1')

emailwindow.onclose=function(){ //Define custom code to run when window is closed
	var theform=this.contentDoc.forms[0] //Access first form inside iframe just for your reference
	var theemail=this.contentDoc.getElementById("emailfield") //Access form field with id="emailfield" inside iframe
	if (theemail.value.indexOf("@")==-1){ //crude check for invalid email
		alert("Please enter a valid email address")
		return false //cancel closing of modal window
	}
	else{ //else if this is a valid email
		document.getElementById("youremail").innerHTML=theemail.value //Assign the email to a span on the page
		return true //allow closing of window
	}
}
} //End "opennewsletter" function

</script>

<link rel="stylesheet" href="css/dhtmlwindow.css" type="text/css" />
<script type="text/javascript" src="js/dhtmlwindow.js"></script>
<link rel="stylesheet" href="css/modal.css" type="text/css" />
<script type="text/javascript" src="js/modal.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  var currentPosition = 0;
  var slideWidth = 560;
  var slides = $('.slide');
  var numberOfSlides = slides.length;

  // Remove scrollbar in JS
  $('#slidesContainer').css('overflow', 'hidden');

  // Wrap all .slides with #slideInner div
  slides
    .wrapAll('<div id="slideInner"></div>')
    // Float left to display horizontally, readjust .slides width
	.css({
      'float' : 'left',
      'width' : slideWidth
    });

  // Set #slideInner width equal to total width of all slides
  $('#slideInner').css('width', slideWidth * numberOfSlides);

  // Insert controls in the DOM
  $('#slideshow')
    .prepend('<span class="control" id="leftControl">Clicking moves left</span>')
    .append('<span class="control" id="rightControl">Clicking moves right</span>');

  // Hide left arrow control on first load
  manageControls(currentPosition);

  // Create event listeners for .controls clicks
  $('.control')
    .bind('click', function(){
    // Determine new position
	currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1;
    
	// Hide / show controls
    manageControls(currentPosition);
    // Move slideInner using margin-left
    $('#slideInner').animate({
      'marginLeft' : slideWidth*(-currentPosition)
    });
  });

  // manageControls: Hides and Shows controls depending on currentPosition
  function manageControls(position){
    // Hide left arrow if position is first slide
	if(position==0){ $('#leftControl').hide() } else{ $('#leftControl').show() }
	// Hide right arrow if position is last slide
    if(position==numberOfSlides-1){ $('#rightControl').hide() } else{ $('#rightControl').show() }
  }	
});
</script>

<script type="text/javascript">
$(document).ready(function(){
  var currentPosition = 0;
  var slideWidth = 560;
  var slides = $('.slide');
  var numberOfSlides = slides.length;

  // Remove scrollbar in JS
  $('#slidesContainer').css('overflow', 'hidden');

  // Wrap all .slides with #slideInner div
  slides
    .wrapAll('<div id="slideInner"></div>')
    // Float left to display horizontally, readjust .slides width
	.css({
      'float' : 'left',
      'width' : slideWidth
    });

  // Set #slideInner width equal to total width of all slides
  $('#slideInner').css('width', slideWidth * numberOfSlides);

  // Insert controls in the DOM
  $('#slideshow')
    .prepend('<span class="control" id="leftControl">Clicking moves left</span>')
    .append('<span class="control" id="rightControl">Clicking moves right</span>');

  // Hide left arrow control on first load
  manageControls(currentPosition);

  // Create event listeners for .controls clicks
  $('.control')
    .bind('click', function(){
    // Determine new position
	currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1;
    
	// Hide / show controls
    manageControls(currentPosition);
    // Move slideInner using margin-left
    $('#slideInner').animate({
      'marginLeft' : slideWidth*(-currentPosition)
    });
  });

  // manageControls: Hides and Shows controls depending on currentPosition
  function manageControls(position){
    // Hide left arrow if position is first slide
	if(position==0){ $('#leftControl').hide() } else{ $('#leftControl').show() }
	// Hide right arrow if position is last slide
    if(position==numberOfSlides-1){ $('#rightControl').hide() } else{ $('#rightControl').show() }
  }	
});
</script><script type="text/javascript" src="js/scrolltopcontrol.js"></script>
</script><script type="text/javascript" src="js/cal2.js"></script>
<script type="text/javascript" src="js/cal_conf2.js"></script>





<script type="text/javascript">

var mygallery=new simpleGallery({
	wrapperid: "simplegallery1", //ID of main gallery container,
	dimensions: [1000, 233], //width/height of gallery in pixels. Should reflect dimensions of the images exactly
	imagearray: [
		["css/images/slide_top.png", "", "", ""],
		["css/images/slide_top2.jpg", "", "", ""],
		["css/images/slide_top3.jpg", "", "", ""],
		["css/images/slide_top4.jpg", "", "", ""],
		["css/images/slide_top5.jpg", "", "", ""],
	],
	autoplay: [true, 2500, 2], //[auto_play_boolean, delay_btw_slide_millisec, cycles_before_stopping_int]
	persist: false, //remember last viewed slide and recall within same session?
	fadeduration: 500, //transition duration (milliseconds)
	oninit:function(){ //event that fires when gallery has initialized/ ready to run
		//Keyword "this": references current gallery instance (ie: try this.navigate("play/pause"))
	},
	onslide:function(curslide, i){ //event that fires after each slide is shown
		//Keyword "this": references current gallery instance
		//curslide: returns DOM reference to current slide's DIV (ie: try alert(curslide.innerHTML)
		//i: integer reflecting current image within collection being shown (0=1st image, 1=2nd etc)
	}
})

</script>

</head>

<body>
<div class="wrapper">

	<!-- START:Header -->
    <div class="header">
        <a href="Home.html" class="csc_logo"></a>
        <div class="support">
        	<a href="#" class="skype"></a>
            <a href="#" class="yahoo"></a>
        </div>
    	<div class="switch_lang">
        	<a href="#" class="vn"></a>
            <a href="#" class="eng"></a>
        </div>
        <div class="contact">
        	<p class="link_contact fRight">
                <a href="#"></a>
                <span class="abc">contact@csc-servicedoffice.com</span>
            </p>
            <div class="clr"></div>
            <p class="phone">
            	<span>(84) 0944 584 688</span>
            	
            </p>
        </div>
        <div class="search_box">
        	<form action="#" method="post">
			<input results="5" name="s" placeholder="Search..." autosave="unique" type="search">
            <button></button>
            </form>
        </div>
    </div>
    <!-- END:Header -->
    
    <!-- START:Slider -->
    <div class="text_motion">
    	<marquee direction="left">
    		<h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tincidunt luctus nisi vitae convallis. Praesent pretium condimentum nulla, vitae posuere erat bibendum at</h1>
        </marquee>
    </div>
    <div class="slider">
    	<div id="simplegallery1"></div>
    </div>
    <!-- END:Slider -->
    
    <!-- START:Container -->
    <div class="container clearfix">
    	
        <!-- START:Menu Left -->
    	<div class="glossymenu">
            <a class="menuitem" href="Home.html">
            	<span class="home"></span>
            	Home
            </a>
            <a class="menuitem submenuheader" href="#" >
            	<span class="about_us"></span>
            	About us
            </a>
            <div class="submenu">
                <ul>
                    <li class="executive"><a href="About1.html">CSC Executive Business Center</a></li>
                    <li class="staffs"><a href="About2.html">CSC Staffs</a></li>
                    <li class="customers"><a href="About3.html">Our Customers</a></li>
                </ul>
            </div>
            <a class="menuitem submenuheader" href="#">
            	<span class="services"></span>
            	Services
            </a>
            <div class="submenu">
                <ul>
                    <li class="service_office"><a href="Service1.html">Service Office</a></li>
                    <li class="smart_office"><a href="Service2.html">Smart Office</a></li>
                    <li class="flexible"><a href="Service3.html">Flexible Work Station</a></li>
                </ul>
            </div> <a class="menuitem" href="Special_Offers.html">
            	<span class="special"></span>
            	Special Offers
            </a>
            <a class="menuitem" href="Business_solutions.html">
            	<span class="business"></span>
            	Business Solution
            </a>
            <a class="menuitem" href="Gallery.html">
            	<span class="gallery"></span>
            	Gallery
            </a>	
            <a class="menuitem" href="News.html">
            	<span class="news"></span>
            	News
            </a>
            <a class="menuitem" href="FAQ.html">
            	<span class="FAQ"></span>
            	F.A.Q
            </a>
            <a class="menuitem" href="Contact.html">
            	<span class="contact_us"></span>
            	Contact Us
            </a>	
        </div>
        <script type="text/javascript">
			ddaccordion.init({
			headerclass: "submenuheader", //Shared CSS class name of headers group
			contentclass: "submenu", //Shared CSS class name of contents group
			revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click", "clickgo", or "mouseover"
			mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover
			collapseprev: true, //Collapse previous content (so only one open at any time)? true/false 
			defaultexpanded: [], //index of content(s) open by default [index1, index2, etc] [] denotes no content
			onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)
			animatedefault: false, //Should contents open by default be animated into view?
			persiststate: true, //persist state of opened contents within browser session?
			toggleclass: ["", ""], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
			togglehtml: ["suffix", "<img src='css/images/plus.png' class='statusicon' />", "<img src='css/images/minus.png' class='statusicon' />"], //Additional HTML added to the header when it's collapsed and expanded, respectively  ["position", "html1", "html2"] (see docs)
			animatespeed: "normal", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
			oninit:function(headers, expandedindices){ //custom code to run when headers have initalized
				//do nothing
			},
			onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
				//do nothing
			}
		})
		</script>
        <!-- END:Menu Left -->
        
        <!-- START:Focus Content -->
        <div class="focus_content fLeft">
        	<ul class="list">
            	<li>
                	<img src="css/images/icon_service_office.png" alt="">
                    <div class="detail">
                    	<h2>
                        	<a href="Service1.html">Serviced Office</a>
                        </h2>
                        <p>Being in the early stage of setting up a business, searching for office could be time-consuming and costly. CSC Executive Business Center provides you alternatives that are suitable for different demands and different financial capacity to new operation of foreign representative offices, project teams, professionals, entrepreneurs, NGOs and social organizations...</p>
                        <p align="right">
                        	<a href="Service1.html" class="readmore">Readmore</a>
                        </p>
                    </div>
                </li>
                <li>
                	<img src="css/images/icon_vitual_office.png" alt="">
                    <div class="detail">
                    	<h2>
                        	<a href="Service2.html">Virtual Office</a>
                        </h2>
                        <p>With telephone answering and fax service of CSC Executive Business Center, you never miss any calls by you customers. Our professional receptionists will help you to answer calls follow your company's standard...</p>
                        <p align="right">
                        	<a href="Service2.html" class="readmore">Readmore</a>
                        </p>
                    </div>
                </li>
                <li>
                	<img src="css/images/icon_hot_desking.png" alt="">
                    <div class="detail">
                    	<h2>
                        	<a href="Service3.html">Hot Desking</a>
                        </h2>
                        <p>For individuals who are working remotely from home, carrying out projects or has one's own business, CSC Executive Business Center provides you a private working station with a modern facilities set up for your convenience and qualified for your need of a high standard working environment... </p>
                        <p align="right">
                        	<a href="Service3.html" class="readmore">Readmore</a>
                        </p>
                    </div>
                </li>
            </ul>
            
            <!-------------------------------------------->
            <ul>
            	<li style="text-align:center; font-size:15px; font-weight:bold; margin-bottom:10px; margin-top:40px">Our Customers</li>
			</ul>

            <div id="slideshow">
    <div id="slidesContainer">
      <div class="slide">
         <ul id="squares" class="bubblewrap">
            <li><a href="#"><img src="squares/facebook.png" alt="" /></a></li>
            <li><a href="#"><img src="squares/delicious.png" alt="" /></a></li>
            <li><a href="#"><img src="squares/digg.png" alt="" /></a></li>
            <li><a href="#"><img src="squares/stumbleupon.png" alt="" /></a></li>
            <li><a href="#"><img src="squares/rss.png" alt="" /></a></li>
            <li><a href="#"><img src="squares/twitter.png" alt="" /></a></li>
            </ul>
      </div>
      <div class="slide">
         <ul id="squares" class="bubblewrap">
            <li><a href="#"><img src="squares/facebook.png" alt="" /></a></li>
            <li><a href="#"><img src="squares/delicious.png" alt="" /></a></li>
            <li><a href="#"><img src="squares/digg.png" alt="" /></a></li>
            <li><a href="#"><img src="squares/stumbleupon.png" alt="" /></a></li>
            <li><a href="#"><img src="squares/rss.png" alt="" /></a></li>
            <li><a href="#"><img src="squares/twitter.png" alt="" /></a></li>
            </ul>
      </div>
      <div class="slide">
         <ul id="squares" class="bubblewrap">
            <li><a href="#"><img src="squares/facebook.png" alt="" /></a></li>
            <li><a href="#"><img src="squares/delicious.png" alt="" /></a></li>
            <li><a href="#"><img src="squares/digg.png" alt="" /></a></li>
            <li><a href="#"><img src="squares/stumbleupon.png" alt="" /></a></li>
            <li><a href="#"><img src="squares/rss.png" alt="" /></a></li>
            <li><a href="#"><img src="squares/twitter.png" alt="" /></a></li>
            </ul>
      </div>
    </div>
  </div>
            
            <!-------------------------------------------->
            
            <div class="clr"></div>
            <div class="slider-wrapper theme-default">
                <div id="slider" class="nivoSlider">
                    <img src="temp/toystory.jpg" data-thumb="temp/toystory.jpg" alt="" />
                    <img src="temp/up.jpg" data-thumb="temp/up.jpg" alt="" title="This is an example of a caption" />
                    <img src="temp/walle.jpg" data-thumb="temp/walle.jpg" alt="" data-transition="slideInLeft" />
                    <img src="temp/nemo.jpg" data-thumb="temp/nemo.jpg" alt="" title="#htmlcaption" />
                </div>
            </div> <!-- END:Slider -->
            <script type="text/javascript">
				$(window).load(function() {
					$('#slider').nivoSlider();
				});
			</script>
           <!-------------------------------------------->
            <div class="clr"></div> 
			<div class="video_box">
              <iframe width="461" height="260" frameborder="0" allowfullscreen="" src="http://www.youtube.com/embed/Y8lSDrllZEU"></iframe>
            </div>
             <!-- end box video -->
             
             <!-------------------------------------------->
            <div class="clr"></div> 
            <div>
            	<img class="banner_640" src="../../Website/css/images/banner460x110.jpg" width="460" height="110" alt="banner_640x110">
                <img class="banner_640" src="../../Website/css/images/banner460x110.jpg" width="460" height="110" alt="banner_640x110"> 
            </div>
            
        </div>
        <!-- END:Focus Content -->
        
        <!-- START:Column Right -->
        <div class="column_right fRight">
        
        	<div class="sidebar clearfix">
            	<div class="head_bar"></div>
                <div class="content">
                	<h3>Quick Quotation</h3>
                    <p>Have feedback from us as soon as we receive your request</p>
                <table width="240" border="1" cellspacing="0" cellpadding="0" class="table_right">
                        <tr height="18" class="tb_gradient bor_bot_c6c6c6">
                            <td class="txt_rt bor_rt_c6c6c6" width="60">
                            <label>Title</label>
                            </td>
                            <td class="txt_rt bor_rt_c6c6c6" style="padding-left:5px">
                              <select >
                                <option value="1">Mr</option>
                                <option value="2">Mrs</option>
                                 <option value="3">Ms</option>
                              </select>
                            </td>
                            <td class="txt_rt bor_rt_c6c6c6" width="40px">Name</td>
                            <td ><input class="input_table" ></td>
                        </tr>
                </table>
                
                <table width="240" border="1" cellspacing="0" cellpadding="0" class="table_right">
                        <tr height="18" class="tb_gradient bor_bot_c6c6c6">
                            <td width="100" class="txt_rt bor_rt_c6c6c6">Email Address</td>
                            <td width="140"><input class="input_table2"></td>
                        </tr>
                        <tr height="18" class="tb_gradient bor_bot_c6c6c6">
                            <td width="100" class="txt_rt bor_rt_c6c6c6">Company Name</td>
                            <td width="140"><input class="input_table2"></td>
                        </tr>
                        <tr height="60" class="tb_gradient bor_bot_c6c6c6">
                            <td width="100" class="txt_rt bor_rt_c6c6c6">
                            	<label >Choose a Service </label>
                            </td>
                            <td width="140">
                              <select style="width:95%; margin:3px">
                                <option value="1">Serviced Office</option>
                                <option value="2">Smart Office</option>
                                <option value="3">Hot Desking</option>
                                <option value="4">Conference Services</option>
                              </select>
                            </td>
                        </tr>
                        <tr height="40" class="tb_gradient bor_bot_c6c6c6" >
                            <td width="100" class="txt_rt bor_rt_c6c6c6" ><label class="label1" style="margin-left:5px;">How do you find us?</label></td>
                            <td width="140"><form><textarea class="input_table4" placeholder="Eg: flyer, direct mail, google search, banner, friend's recommendation .etc" ></textarea></form></td>
                        </tr>
                    </table>

                </div>
                <div class="footer_bar">
                    <p align="center">
                    	<button class="send" onClick="opennewsletter(); return false">Send</button>
                    </p>
                </div>
            </div> <!-- END:Quick Quotation -->
            
            <div class="sidebar clearfix">
            	<div class="head_bar"></div>
                <div class="content">
                	<h3>Meeting Room Booking</h3>
                    <p>
                    	Set up a meeting within 10 minutes
                    	<br>
                        Call us at 04 3736 8188 to book now
                    </p>
                    <tbody>
                    <table class="table2" >
                        <tr class="h2">
                            <td class="td1">Date
                            </td>
                            <td class="td2">
                              <form name="sampleform">
                              <input type="text" name="firstinput"  style="background:#FFF; border:1px solid #c6c6c6; height:17px; "> 
                              <small><a href="javascript:showCal('Calendar1')"><img src="css/images/calendar.jpg" width="16" height="15" style="margin:0px 0px 0px 4px" alt="calendar"></a></small>
                              </form>
                            </td>
                            <td class="td1">Time
                            </td>
                            <td class="td2">
                              <select style="width:90%; margin:1px 4px 0px 4px">
                              <option value="1">00mins</option>
                                <option value="2">15mins</option>
                                <option value="3">30mins</option>
                                <option value="4">45mins</option>
                              </select>
                               <select style="width:90%; margin:0px 4px">
                                <option value="1">1:AM</option>
                                <option value="2">2:AM</option>
                                <option value="3">3:AM</option>
                                <option value="4">4:AM</option>
                                <option value="5">5:AM</option>
                                <option value="6">6:AM</option>
                                <option value="7">7:AM</option>
                                <option value="8">8:AM</option>
                                <option value="9">9:AM</option>
                                <option value="10">10:AM</option>
                                <option value="11">11:AM</option>
                                <option value="12">12:AM</option>
                                 <option value="13">1:PM</option>
                                <option value="14">2:PM</option>
                                <option value="15">3:PM</option>
                                <option value="16">4:PM</option>
                                <option value="17">5:PM</option>
                                <option value="18">6:PM</option>
                                <option value="19">7:PM</option>
                                <option value="20">8:PM</option>
                                <option value="21">9:PM</option>
                                <option value="22">10:PM</option>
                                <option value="23">11:PM</option>
                                <option value="24">12:PM</option>
                              </select>
                            </td>
                        </tr>
                        <tr class="h1">
                            <td class="td1">Title
                            </td>
                            <td class="td2">
                              <select style="width:90%; margin:0px 0px 0px 4px">
                                <option value="1">Mr</option>
                                <option value="2">Mrs</option>
                                <option value="3">Ms</option>
                              </select>
                            </td>
                            <td class="td1">Name
                            </td>
                            <td class="td2">
                              <form><input type="text"></form>
                            </td>
                        </tr>
                        <tr class="h1">
                            <td class="td1">Mobile
                            </td>
                            <td class="td2">
                              <form><input type="text"></form>
                            </td>
                            <td class="td1">Email
                            </td>
                            <td class="td2">
                              <form><input type="text"></form>
                            </td>
                         </tr>
                        <tr class="h2">
                            <td class="td1">Company Name
                            </td>
                            <td colspan="3" class="td4">
                              <form><textarea></textarea></form>
                            </td>
                        </tr>
                        <tr class="h3">
                            <td class="td1">Type
                            </td>
                            <td class="td2">
                              <select style="width:90%; margin:1px 0px 0px 3px">
                                <option value="1">Standard Meeting Room (4-6 people)</option>
                                <option value="2">Conference Room (8-10 people)</option>
                              </select>
                            </td>
                            <td class="td1">Number of pax
                            </td>
                            <td class="td2">
                              <form><textarea></textarea></form>
                            </td>
                        </tr>
                        <tr class="h4">
                            <td class="td1">Facilities Request
                            </td>
                            <td class="td3">
                            <input type="checkbox" > LCD Screen &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="checkbox" > Projector<br>
                            <input type="checkbox" > Flipchart  <input type="checkbox" > Teleconferencing<br>
                            <input type="checkbox" > Video conferencing
                            </td>
                        </tr>
                        <tr class="h2">
                            <td class="td1">Special Request
                            </td>
                            <td class="td3" style="height:40px">
                              <form><textarea placeholder="Type your request here"></textarea></form>
                            </td>
                        </tr>


                    </table>
                    </tbody>

                    
                 
                

                </div>
                <div class="footer_bar">
                    <p align="center">
                    	<button class="booknow" onClick="opennewsletter(); return false">Book Now</button>
                    </p>
                </div>
            </div> <!-- END:Meeting Room Booking -->
            
            
            <div class="sidebar clearfix">
            	<div class="head_bar"></div>
                <div class="content">
                	<h3>News And Updates </h3>
                    <div class="news">
                       <ul>
                         <li>
                    	    <img src="css/images/img_news_small.jpg" width="60" height="56" alt="img_news"> 
                            <a href="#">Lorem ipsum dolor sit amet, consectetuer...</a>
                         </li>
                          <li>
                    	    <img src="css/images/img_news_small.jpg" width="60" height="56" alt="img_news"> 
                            <a href="#">Lorem ipsum dolor sit amet, consectetuer...</a>
                         </li>
                          <li>
                    	    <img src="css/images/img_news_small.jpg" width="60" height="56" alt="img_news"> 
                            <a href="#">Lorem ipsum dolor sit amet, consectetuer...</a>
                         </li>
                       </ul>
                    </div>
                        <p style="float:right" >
                        	<a href="#" class="readmore">Readmore</a>
                        </p>

                </div>
                <div class="footer_bar">
                </div>
                  <!-- end news box side right-->
                <!-------------------------------------------->
                <div class="clr"></div> 
                <div>
                    <img class="banner_265" src="../../Website/css/images/banner265x221.jpg" width="265" height="221" alt="banner_265x221">
                    <img class="banner_265" src="../../Website/css/images/banner265x221.jpg" width="265" height="221" alt="banner_265x221">
           		</div>
                
            </div>
          
            
         <!-- End mail foot -->

            
            
        </div>
        <!-- END:Column Right -->
        
        
    </div>
    <!-- END:Container -->
    
    <!-- START:Footer -->
    <div class="footer">
    	<div class="icon_newroom fLeft">
        	<ul>
            	<li class="fLeft">
                	<a href="#">
                        <img src="css/images/icon_vanphongtrongoi.png" alt="Service Office" width="35" height="35" title="Service Office">
                        <p>Service Office</p>
                    </a>
                </li>
                <li class="fLeft">
                	<a href="#">
                        <img src="css/images/icon_vanphongao.png" alt="Smart Office" width="35" height="35" title="Smart Office">
                        <p>Smart Office</p>
                    </a>
                </li>
                <li class="fLeft">
                	<a href="#">
                        <img src="css/images/icon_chongoilamviec.png" alt="Flexible work station" width="35" height="35" title="Flexible work station">
                        <p>Flexible Work Station</p>
                    </a>
                </li>
                <li class="fLeft">
                	<a href="#">
                        <img src="css/images/icon_phonghop.png" alt="Meeting Room" width="35" height="35" title="Meeting Room">
                        <p>Meeting Room</p>
                    </a>
                </li>
            </ul>
        </div>
        <h4>Copyright 2012 © CSC. All rights reserved. CSC Vietnam JSC - Icon 4 Tower, Level 16, 243A De La Thanh St, Dong Da Dist, Ha Noi, Viet Nam</h4>
		<h4>Telephone: (+844) 3736 8188 - Hotline: (+84) 90321 8484  |  Fax: (+84 4) 6266 2608 - Email: contact@csc-servicedoffice.com</h4>
        <div class="social">
        	<a href="#" class="rss">RSS</a>
            <a href="http://www.youtube.com/cscvietnamgroup" target="_blank"  class="yt">Youtube</a>
            <a href="http://www.facebook.com/CscExecutiveBusinessCenter" target="_blank" class="fb">Facebook</a>
            <a href="https://twitter.com/cscvietnam" target="_blank" class="tw">Twitter</a>            <a href="http://vn.linkedin.com/in/cscvietnamgroup" target="_blank" class="in">Link in</a>
</div>
        <div class="mail_foot">
        <form action="#" method="post" >
        <label>
        Sign up for our newsletter
        </label>
           	
	    <input results="5" name="s" placeholder="Enter your mail address" autosave="unique" type="text">
        <button class="booknow">Subcribe</button>
        </form>
 
        </div>
    </div>
    <!-- END:Footer -->
    
    

</div>
</body>
</html>
